<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            --top-height: 60px;
            --top-margin: 12px
        }

        body {
            background-color: #f2f3f5;
        }

        .top {
            height: var(--top-height);
            border-bottom: 1px solid #c3c7cb;
            box-sizing: border-box;
            background: white;
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
        }

        .main {
            min-width: 800px;
            width: 75%;
            margin: 0 auto;
            display: flex;
            gap: 12px;
            margin-top: var(--top-margin);
        }

        .left {
            height: 300px;
            position: sticky;
            top: calc(var(--top-height) + var(--top-margin));
            width: 160px;
            flex-shrink: 0;
        }

        .middle {
            height: 2000px;
            flex: 1 1 0;
            overflow: auto;
            /* 重要！不然内容的宽度过大时会把自己撑大，把.right挤出.main外面去。
             * 貌似设置了min-width:0后，.left和.right可以不用设置flex-shrink:0也不会被挤。
            */
            min-width: 0;
        }

        .right {
            height: 600px;
            width: 140px;
            position: sticky;
            top: calc(var(--top-height) + var(--top-margin));
            flex-shrink: 0;
        }

        .container {
            padding: 12px;
            box-shadow: 0 0 3px rgba(0, 0, 0, .02), 0 4px 8px rgba(0, 0, 0, .02);
            border-radius: 2px;
            box-sizing: border-box;
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="main">
        <div class="left container">left</div>
        <div class="middle container">center</div>
        <div class="right container">right</div>
    </div>
</body>

</html>